<template>
  <div class="search">
    <el-row>
      <el-col :span="10">
        <div class="date">
          <span style="margin-right: 10px">计划日期</span>
          <el-date-picker
            v-model="dateList"
            type="datetimerange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
      </el-col>
      <el-col :span="10" :offset="1">
        <cycle @change="cycleChange" />
      </el-col>
      <el-col
        :span="3"
        :offset="0"
        style="display: flex; justify-content: flex-end"
      >
        <el-button type="primary" :icon="SuccessFilled" @click="submit()"
          >提交</el-button
        >
        <!-- 重置 -->
        <el-button @click="onReset">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { SuccessFilled } from '@element-plus/icons-vue'
import cycle from '../components/cycle.vue'
import dayjs from 'dayjs'

const props = defineProps({
  curTime: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['findPage'])

let dateList = ref([])
let cycleList = ref([
  { name: '单次', value: 'startToEndOfSingle', dateList: [] },
  { name: '本周', value: 'startToEndOfWeek', dateList: [] },
  { name: '近7天', value: 'startToEndOfLast7Days', dateList: [] },
  { name: '近14天', value: 'startToEndOfLast14Days', dateList: [] },
  { name: '本月', value: 'startToEndOfMonth', dateList: [] }
])

watch(
  () => props.curTime,
  (val) => {
    // 通过当前时间计算，采用dayjs获取当天，本周、近7天、近14天、本月的数据
    calculate(val)
  },
  {
    immediate: true
  }
)

const cycleChange = (val) => {
  cycleList.value.forEach((item) => {
    if (item.value === val) {
      dateList.value = item.dateList
    }
  })
}

function calculate(startTime) {
  let dateList_config = {
    startToEndOfSingle: [
      dayjs(startTime).format('YYYY-MM-DD'),
      dayjs(startTime).format('YYYY-MM-DD')
    ],
    startToEndOfWeek: [
      dayjs(startTime).startOf('week').add(1, 'day').format('YYYY-MM-DD'),
      dayjs(startTime).endOf('week').add(1, 'day').format('YYYY-MM-DD')
    ],
    startToEndOfLast7Days: [
      dayjs(startTime).format('YYYY-MM-DD'),
      dayjs(startTime).add(7, 'day').format('YYYY-MM-DD')
    ],
    startToEndOfLast14Days: [
      dayjs(startTime).format('YYYY-MM-DD'),
      dayjs(startTime).add(14, 'day').format('YYYY-MM-DD')
    ],
    startToEndOfMonth: [
      dayjs(startTime).startOf('month').format('YYYY-MM-DD'),
      dayjs(startTime).endOf('month').format('YYYY-MM-DD')
    ]
  }
  cycleList.value.forEach((item) => {
    item.dateList = dateList_config[item.value]
  })
  dateList.value = dateList_config.startToEndOfSingle
}

const submit = () => {
  emit('submit', dateList.value)
}

const onReset = () => {
  dateList.value = cycleList.value[0].dateList
}
</script>

<style lang="scss" scoped>
.search {
  .date,
  .cycle {
    display: flex;
    align-items: center;
  }
}
</style>
